<template>
<div class="map" :class="isFullScreen?'full-screen':''">
    <div id="mapContainer" class="map-container"></div>
    <!-- 暂时屏蔽放大地图功能 -->
    <!-- <div class="screen-btn" @click="handleChange">
        <i class="el-icon-full-screen" style="font-size:30px;color:blue;" v-show="!isFullScreen"></i>
        <i class="el-icon-aim" style="font-size:30px;color:blue;" v-show="isFullScreen"></i>
    </div> -->
</div>
</template>
<script>
import GPS from '@/utils/gps'

export default {
  props: {
    location: {
      type: String,
      default: ''
    },
    isClick: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    location: {
      handler(nv) {
        if(!this.map) {
          this.$nextTick(_=> {
            this.initMap()
            // if(nv) {
            //   this.addMarker(GPS.WGS84toGCJ02(...JSON.parse(nv)))
            //   this.map.setCenter(GPS.WGS84toGCJ02(...JSON.parse(nv)))
            // }
          })
        }
        this.moveMarker = null
        if(nv && this.map) {
          // this.addMarker(GPS.WGS84toGCJ02(...JSON.parse(nv)))
          // this.map.setCenter(GPS.WGS84toGCJ02(...JSON.parse(nv)))
        }
      },
      immediate: true
    }
  },
  computed: {
    systemInfo() {
        return this.$store.state.systemInfo;
    }
  },
  mounted() {
      this.$nextTick(_=> {
        this.initMap()
      })
  },
  beforeDestroy() {
    this.map && this.map.off('click', this.handleClick)
  },
  data() {
    return {
      map: null,
      moveMarker: null,
      isFullScreen: false,
      polygons: [],
      circles: []
    }
  },
  methods: {
    initMap(cb) {
      if(!this.map) {
        const locationCenter = this.$store.state.locationCenter;
        this.map = new AMap.Map('mapContainer', {
          mapStyle: 'amap://styles/normal',
          viewMode: '2D',
          zoom: 14,
          center: locationCenter
        });
      }

      this.map.on("click", this.handleClick)
      cb && cb()
    },
    addMarker(lnglat) {
    //   const location = typeof lnglat == 'string' ? GPS.WGS84toGCJ02(...JSON.parse(lnglat)):lnglat
      const location = this.getConvertLocation(1, lnglat, '02')
      this.moveMarker = new AMap.Marker({
        position: location,
        map: this.map,
        draggable: false
      })
      if(!this.map) {
        setTimeout(_=>{
          this.addMarker(lnglat)
        },1500)
      }else{
        this.map.setCenter(location)
      }
    },
    clearMarker() {
      if(this.map) {
        this.map.clearMap()
      }
      this.moveMarker = null
    },
    handleClick(e) {
        if(!this.isClick) return;
        if(this.moveMarker) {
          this.moveMarker.setPosition(e.lnglat)
        }else{
          this.addMarker(e.lnglat)
        }
        const lnglat = GPS.GCJ02toWGS84(e.lnglat.lng, e.lnglat.lat)
        this.$emit('change', JSON.stringify(lnglat))
    },
    handleChange() {
      this.isFullScreen = !this.isFullScreen
    },
        // 根据数据类型创建点线面
    createLayers(item) {
        try {
            this.remove()
            if (item.type == 1) {
            //点
            this.createCircle(item);
            } else if (item.type == 2) {
            //面
            this.createPolygon(item);
            }
            this.map.setFitView();            
        } catch (error) {
            console.log("error", error)
        }
    },
        // 创建面
    createPolygon(item) {
      if (!item.locations || !this.map) return;
      const locations = JSON.parse(item.locations)
      const location02 = locations.map(c => GPS.WGS84toGCJ02(...c))
      const pg = new AMap.Polygon({
        path: location02,
        strokeColor: '#FF33FF',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: '#1791fc',
        fillOpacity: 0.4
      });
      this.polygons.push(pg);
      this.map.add(pg);
    },
        // 创建圆
    createCircle(item) {
      if (!item.locations || !this.map) return;
      const locations = JSON.parse(item.locations)
      const location02 = GPS.WGS84toGCJ02(...locations)
      const cc = new AMap.Circle({
        center: location02, //圆心
        radius: item.radius, //半径
        strokeColor: '#FF33FF',
        strokeWeight: 2,
        fillColor: '#1791fc',
        fillOpacity: 0.4
        // strokeStyle: 'dashed'
      });
      this.circles.push(cc);
      this.map.add(cc);
    },
    remove() {
      if (this.polygons.length) {
        this.map && this.map.remove(this.polygons);
      }
      if (this.circles.length) {
        this.map && this.map.remove(this.circles);
      }
      this.polygons = [];
      this.circles = [];
    }
  }
}
</script>
<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  position: relative;
  .screen-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    z-index: 9;
  }

}
.full-screen {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: 8;
  width: 60vw;
}
.map-container {
  width: 100%;
  min-height: 250px;
  height: 100%;
}
</style>
